<template>
<div>
    <div class="dingbu">
        <div class="biaoti">我的考拉</div>
        <img class="biaoti-a" src="https://kaola-haitao.oss.kaolacdn.com/e8e6d81e-71e7-417f-9389-db2fa0d72b2e_78_78.png?x-oss-process=image/resize,w_117,h_0/quality,q_95" alt="">
        <div class="yonghu">
            <div class="yonghu-tx">
                <a href="#">
                    <img src="https://kaola-haitao.oss.kaolacdn.com/vtgcByWTZlKwtnRQvhvLT170102401020_150_150.png?x-oss-process=image/resize,w_123,h_0/quality,q_95" alt="">
                </a>
            </div>
            <div class="yonghu=name">
                <a href="#">
                    <span class="name-span" style="margin-left: 10px;">{{ username }}</span>
                </a>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
 data () {
return {
    username:''
}
 },
 mounted () {
     this.username = JSON.parse(localStorage.getItem('user')).phone
}
}
</script>

<style lang="scss" scoped>
    .dingbu{
        width: 100%;
        height: 170px;
        padding-top: 10.5px;
        position: absolute;
        top: 0;
        z-index: 20;
        border-bottom-left-radius: 100% 10%;
        border-bottom-right-radius: 100% 10%;
        background: linear-gradient(180deg,#fd424d 60%,#fa1921);
        .biaoti{
            text-align: center;
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #fff;
            letter-spacing: 0;
            font-weight: 700;
        }
        .biaoti-a{
            width: 39px;
            position: absolute;
            z-index: -1;
            top: 40px;
        }
        .yonghu{
            padding-top: 20px;
            position: relative;
            height: 65px;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            .yonghu-tx{
                margin-left: 11px;
                a{
                    img{
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        overflow: hidden;
                        background: #d39292;
                        border: 2px solid #fff;
                    }
                }
            }
            .yonghu-name{
                margin-left: 4px;
                height: 20px;
            }
        }
    }
    .name-span{
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #fff;
        line-height: 20px;
        font-weight: 700;
    }
</style>
